<template>
  <vue-hover-mask @click="handleClick" style="margin: 5px 0">>
    <!-- 默认插槽 -->
    <a-form  style="padding: 0 10px">
      <ul>
        <li>
          <div class="content-show-l">用户昵称</div>
          <div class="content-show-r" :class="userInfo.realname ? '' : 'no-data'">
            {{ userInfo.realname ? userInfo.realname : '未填写' }}
          </div>
        </li>
        <li>
          <div class="content-show-l">用户账号</div>
          <div class="content-show-r" :class="userInfo.username ? '' : 'no-data'">
            {{ userInfo.username ? userInfo.username : '未填写' }}
          </div>
        </li>
        <li>
          <div class="content-show-l">
            <span>性</span>
            <span>别</span>
          </div>
          <div class="content-show-r" :class="userInfo.sex ? '' : 'no-data'">
            {{ userInfo.sex ? userInfo.sex_dictText : '未知' }}
          </div>
        </li>
        <li>
          <div class="content-show-l">出生日期</div>
          <div class="content-show-r" :class="userInfo.birthday ? '' : 'no-data'">
            {{ userInfo.birthday ? userInfo.birthday : '未填写' }}
          </div>
        </li>
        <li>
          <div class="content-show-l">工作时间</div>
          <div class="content-show-r" :class="userInfo.workingHours ? '' : 'no-data'">
            {{ userInfo.workingHours ? userInfo.workingHours : '未填写' }}
          </div>
        </li>
        <li>
          <div class="content-show-l">电子邮件</div>
          <div class="content-show-r" :class="userInfo.email ? '' : 'no-data'">
            {{ userInfo.email ? userInfo.email : '未填写' }}
          </div>
        </li>
        <li>
          <div class="content-show-l">电话号码</div>
          <div class="content-show-r" :class="userInfo.phone ? '' : 'no-data'">
            {{ userInfo.phone ? userInfo.phone : '未填写' }}
          </div>
        </li>
      </ul>
    </a-form>
    <!-- action插槽 -->
    <template v-slot:action>
      <i class="iconfont icon-bianji-copy">编辑</i>
    </template>
  </vue-hover-mask>

</template>

<script>
import { getAction } from '@/api/manage'
import VueHoverMask from './VueHoverMask'

export default {
  name: 'PersonalDataBaseList',
  components: {
    VueHoverMask
  },
  data() {
    return {
      url: {
        getCurrentLoginUser: '/sys/user/getCurrentLoginUser'
      },
      confirmLoading: false,
      userInfo: {}
    }
  },
  mounted() {
    this.getCurrentLoginUser()
  },
  methods: {
    handleClick() {
      this.$emit('showFlag', false, this.userInfo)
    },
    getCurrentLoginUser() {
      getAction(this.url.getCurrentLoginUser, {}).then(res => {
        if (res.success) {
          this.userInfo = res.result.records[0]
          this.$emit('initUserInfo', res.result.records[0])
        }
      })
    }
  }
}
</script>

<style scoped>
ul li {
  list-style: none;
  margin-top: 20px;
  font-weight: 400;
  line-height: 24px;
  font-size: 14px;
  display: flex;
}

.content-show-l {
  width: 56px;
  color: #555666;
  margin-right: 40px;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.content-show-r {
  color: #222226;
  word-break: break-all;
}

.no-data {
  color: #999aaa;
}
</style>

